<template>

  <div>
    <!-- {{ dataList }} -->
    <div class="data">世界疫情数据分析可视化</div>
    <div>
      <div class="data_1">新增重症病例可视化</div>
      <div id="content" style="height: 400px; width: 1400px; padding: 10px 0;"></div>
    </div>
    <div>
      <div class="data_1">死亡/疑似病例可视化</div>
      <div id="content_1" style="height: 400px; width: 1300px; padding: 10px 0;"></div>
    </div>
    <!-- {{ cont }} -->
    <div>
      <div class="data_1">世界疫情数据</div>
      <div class="data_2">
        <el-row>
          <el-col :span="4"
            ><div>国家</div></el-col
          >
          <el-col :span="4"
            ><div>疑似病例</div></el-col
          >
          <el-col :span="4"
            ><div>死亡病例</div></el-col
          >
          <el-col :span="4"
            ><div>治愈人数</div></el-col
          >
          <el-col :span="4"
            ><div>重症人数</div></el-col
          >
          
        </el-row>
        <!-- {{ item.province }} -->
        <el-row v-for="item in cont" :key="item.id">
          <el-col :span="4"
            ><div>{{ item.name }}</div></el-col
          >
          <el-col :span="4"
            ><div>{{ item.susNum }}</div></el-col
          >
          <el-col :span="4"
            ><div>{{ item.deathNum }}</div></el-col
          >
          <el-col :span="4"
            ><div>{{ item.cureNum }}</div></el-col
          >

          <el-col :span="4"
            ><div>{{ item.econNum }}</div></el-col
          >
          
        </el-row>
      </div>
        </div>
        
  </div>
  
</template>
<style scoped>

.data{
  /* color:rgb(222, 248, 172) */
  font-size: 40px;
  font-weight: 20px;
  font-family: 华文行楷;
  color: rgb(88, 24, 24);
  height: 40px;
  /* width: 500px; */
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  /* background-color: palegoldenrod; */
  padding: 40px;
  
}
.data_1{
  /* background-color:#ccc; */
  font-size: 36px;
  font-family: 华文行楷;
  color: rgb(180, 60, 66);
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 40px 0;
  
}
.data_2{
  font-size: 20px;
  font-family: 楷体;
  /* color: rgb(247, 205, 127); */
  height: 40px;
  line-height: 40px;
  text-align: center;
  /* vertical-align: center; */
  border: 1px 0 0 0 solid red;
  padding: 20px;
}
</style>

<script>
// import { mapActions,mapState } from 'vuex';
// import worldata from "../../assets/worlddata.json"
import axios from "axios";
export default {
  data() {
    return {
      cont: {},
    };
  },
  // 将分页查询的疫情数据前面十条显示到折现图中，x轴显示省份，y轴显示确诊人数
  mounted() {
    // this.initEchart();
  },

  created() {
    setInterval(() => {
            this.findData(); 
        }, 4000);
  },
  methods: {
    findData() {
      axios.defaults.baseURL = "http://localhost:9528";
      axios.get("/test/news/wap/fymap2020_data.d.json").then((res) => {
        // console.log(res)
        this.cont = res.data.worldlist;
        console.log(this.cont);
        let res1 = res.data.worldlist.map((item) => {
          // console.log(item.name)
          return item.name;
        });
        // 死亡人数
        let res2 = res.data.worldlist.map((item) => {
          return item.deathNum;
        });
        // 治愈人数
        let res3 = res.data.worldlist.map((item) => {
          return item.cureNum;
        });
        let res4 = res.data.worldlist.map((item) => {
          return item.econNum;
        });
        this.initEchart(res1, res4);
        this.initEcharts(res1, res2, res3);
      });
    },

    // 初始化图表
    initEchart(res1, res2) {
      // 销毁图表
      echarts.init(document.getElementById("content")).dispose();

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("content"));

      // 指定图表的配置项和数据
      var option = {
        
        xAxis: {
          type: "category",
          data: res1,
          axisLabel: {
            formatter(val) {
              return val.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: res2,
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts(res1, res2, res3) {
      echarts.init(document.getElementById("content_1")).dispose();

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("content_1"));
      var option = {
        // title: {
        //   // text: "世界疫情数据分析",
        //   // subtext: "数据分析",
        // },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["死亡人数", "治愈人数"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: res1,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "死亡人数",
            type: "bar",
            data: res2,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "治愈人数",
            type: "bar",
            data: res3,
            markPoint: {
              data: [
                {name: '最多', value: 182.2, xAxis: 7, yAxis: 183},
                {name: '最少', value: 2.3, xAxis: 11, yAxis: 3}
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>